<template>
  <div>
    <div class="container">
      <div class="header" :class="{active: isActive}">
        <Header></Header>
      </div>
      <div class="body">
        <div>
          <TitleForSketchStyle></TitleForSketchStyle>
        </div>
        <div>
          <ScrollFont msg="生活不止有眼前的苟且,还有诗和远方!"></ScrollFont>
        </div>
        <div class="down">
          <SvgIcon name="down" width="100" height="100" color="#fff"></SvgIcon>
        </div>
      </div>

    </div>
    <div class="container-wraper"><!--动画区域-->
      <div class="ani-container"><!--视口-->
        <ul class="list">
          <li order="0" class="item">
            <SvgIcon name="pinia"></SvgIcon>
            <p>pinia</p></li>
          <li order="1" class="item">
            <SvgIcon name="ECharts"></SvgIcon>
            <p>Echarts</p></li>
          <li order="2" class="item">
            <SvgIcon name="element-plus"></SvgIcon>
            <p>ElementPlus</p></li>
          <li order="3" class="item">
            <SvgIcon name="vite"></SvgIcon>
            <p>Vite</p></li>
          <li order="2" class="item">
            <SvgIcon name="vue3"></SvgIcon>
            <p>Vue.js</p></li>
          <li order="1" class="item">
            <SvgIcon name="ts"></SvgIcon>
            <p>TypeScript</p></li>
          <li order="0" class="item">
            <SvgIcon name="React"></SvgIcon>
            <p>React.js</p></li>
          <li order="0" class="item">
            <SvgIcon name="uni-app"></SvgIcon>
            <p>uniapp</p></li>
          <li order="1" class="item">
            <SvgIcon name="scss"></SvgIcon>
            <p>Scss</p></li>
          <li order="2" class="item">
            <SvgIcon name="eslint"></SvgIcon>
            <p>Eslint</p></li>
          <li order="3" class="item">
            <SvgIcon name="node.js"></SvgIcon>
            <p>node.js</p></li>
          <li order="2" class="item">
            <SvgIcon name="Webpack"></SvgIcon>
            <p>Webpack</p></li>
          <li order="1" class="item">
            <SvgIcon name="axios"></SvgIcon>
            <p>axios</p></li>
          <li order="0" class="item">
            <SvgIcon name="es6"></SvgIcon>
            <p>ES6</p></li>
          <li order="0" class="item">
            <el-button style="width:980px " size="large" type="primary">
              掌握的技术
            </el-button>
          </li>
        </ul>
      </div>
      <div class="logo">
        <div>
          <img class="logoimg"
               :src="logo"
               alt=""
               width="180"
               height="180">
        </div>
        <div>
          <div class="div2"
               style="margin: 10px 0; display: flex; justify-content: space-between;">
            <div>
              <el-tag>2021.09-2025.09</el-tag>
            </div>
            <div>
              <el-button type="primary" icon="School">江西理工大学</el-button>
            </div>
            <div>
              <el-tag>软件工程学院</el-tag>
              / <span><el-tag type="success">本科</el-tag></span></div>
          </div>
          <div class="theSteps">
            <el-steps :active="10" align-center>
              <el-step title="2021年12月" description="普通话水平测试二级二等"></el-step>
              <el-step title="2022年4月" description="江西理工大学第一届程序设计竞赛二等奖"></el-step>
              <el-step title="2022年5月" description="江西理工大学三等奖学金"></el-step>
              <el-step title="2022年10月" description="第四届全国大学生算法设计与编程赛优秀奖"></el-step>
              <el-step title="2022年10月" description="江西理工大学万行代码挑战活动最佳骏码奖"></el-step>
              <el-step title="2022年12月" description="国家励志奖学金"></el-step>
              <el-step title="2022年12月"
                       space="100"
                       description="第五届传智杯IT技能大赛程序设计赛二等奖"></el-step>
              <el-step title="2023年4月"
                       description="蓝桥杯省赛二等奖"></el-step>
              <el-step title="2023年12月"
                       description="国家励志奖学金"></el-step>
              <el-step title="2024年2月"
                       description="软件著作权"></el-step>
              <el-step title="2024年8月"
                       description="找到实习"></el-step>
            </el-steps>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <Bottom></Bottom>
    </div>
  </div>
</template>
<script setup lang="ts">
import Header from "@/layout/index.vue"
import {onMounted, onUnmounted, ref} from "vue";
import SvgIcon from "@/components/SvgIcon/SvgIcon.vue";
import ScrollFont from "@/components/ScrollFont/index.vue";
import TitleForSketchStyle from "@/components/TitleForSketchStyle/index.vue"
import Bottom from "@/components/Bottom/index.vue"
import {flowerDrops} from "@/utils/tool.ts";

let logo
let propObj = ref(new Map())
onMounted(async () => {
  fillPropToObj()
  window.addEventListener('scroll', updateStyleAttr)
  window.addEventListener("scroll", handleScroll)
  setTimeout(() => {
    logo = "https://cdn.xuxiao888.com/picture9b32a4b6a19682232616c1e5a981fe2.jpg?e=1713411370&token=3xDQvuj_5fwOatHR5JutJUXOt5jofKFzDEnM6fCH:LXnSDfeXctQ6-pWc6LjXZnyb-ck="
  }, 1000)
})
const isActive = ref(false)
const handleScroll = () => {
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  isActive.value = scrollTop > 733;
}
onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll);
});
const fillPropToObj = () => {
  //节点以及对应的样式属性
  const items = document.querySelectorAll('.item')
  const containerWraper: any = document.querySelector('.container-wraper')
  const list: any = document.querySelector('.list')
  propObj.value.clear()
  const containerWraperRect: any = containerWraper.getBoundingClientRect()// 获取容器位置以及几何信息
  const minX = containerWraperRect.top + window.scrollY // 容器containerWraper触摸到顶部，开始有变化
  const maxX = containerWraperRect.bottom + window.scrollY - window.innerHeight // 容器containerWraper底部触摸到可视窗口底部开始不再变化
  items.forEach(dom => {
    propObj.value.set(dom, getDomStylePropValue(dom, minX, maxX))
  })

  function fx(minX: any, maxX: any, minY: any, maxY: any) {
    return function (x: any) {
      if (x < minX) {
        return minY
      }
      if (x > maxX) {
        return maxY
      }
      // 类似函数y = kx + b
      return ((maxY - minY) / (maxX - minX)) * (x - minX) + minY
    }
  }

  function getDomStylePropValue(dom: any, minX: any, maxX: any) {
    // 添加顺序，不同的x决定y的变化
    minX = minX + dom.getAttribute('order') * 300
    const opacity = fx(minX, maxX, 0, 1)
    const scale = fx(minX, maxX, 0, 1)
    const tx = fx(minX, maxX, list.clientWidth / 2 - dom.offsetLeft - dom.clientWidth / 2, 0)
    const ty = fx(minX, maxX, list.clientHeight / 2 - dom.offsetTop - dom.clientHeight / 2, 0)
    const transform = function (x: any) {
      return `translate(${tx(x)}px, ${ty(x)}px) scale(${scale(x)})`
    }
    return {opacity, transform}
  }
}
const updateStyleAttr = () => {
  for (const [dom, value] of propObj.value) {
    Object.keys(value).forEach(prop => {
      dom.style[prop] = value[prop](window.scrollY)
      // console.log(prop, value[prop](window.scrollY));
    })
  }
}
</script>
<style scoped lang="scss">

.container {
  width: 100%;
  height: 100vh;
  background-image: url("https://cdn.xuxiao888.com/back/colorhub.me_photos_VwNWN_6000x4000-Dyy2vcne%20%281%29.jpeg");
  background-position: 50%;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  cursor: pointer;
  //overflow: hidden;

  .header {
    //粘性定位
    position: fixed;
    top: 0;
    z-index: 999;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.3);
    transition: all 0.3s;

  }

  .active {
    background: rgba(255, 255, 255, 0.3);
    box-shadow: 0 1px 3px 0 rgb(0 34 77 / 10%);
    border: 1px solid rgba(255, 255, 255, 0.05);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }

  .body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: calc(100vh - 100px);
    position: relative;

    .down {
      position: absolute;
      bottom: -60px;
      animation: upAndDown 1s infinite;
    }

    @keyframes upAndDown {
      0% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(30px);
      }
      100% {
        transform: translateY(0);
      }
    }
  }
}

.ani-container .list img {
  width: 80px;
  height: 80px;
  border-radius: 20px
}

.ani-container .list p {
  margin-top: 10px;
}

li {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: black;
}

ul {
  margin: 0;
  padding: 0;
}

header, footer {
  height: 100vh;
  text-align: center;
  background-color: rgb(228, 241, 254);
}

.container-wraper {
  height: 300vh;


  background-image: linear-gradient(to right, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%);
  position: relative;

}

.container-wraper .ani-container {
  height: 100vh;
  width: 100%;
  position: sticky;
  top: 0;
  left: 0;
  display: flex;
}

.container-wraper .ani-container .list {
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  width: 980px;
  position: relative;
}

.container-wraper .ani-container .list .item {
  width: 80px;
  height: 80px;
  margin: 60px 30px;
  border-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
}


.logo {
  width: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translate(-50%, -50%);


  .logoimg {
    border-radius: 50%;
    margin-bottom: 20px;
  }

  .logoimg:hover {
    cursor: pointer;
    //鼠标经过动画旋转360度
    animation: rotate 2s linear infinite;

  }

  @keyframes rotate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
}

:deep(.el-step__description) {
  color: #ffffff;
  font-family: "Agency FB", serif;
  font-weight: 600;
  font-size: 15px;
}


:deep(.el-step__title) {
  color: #bae5d7;
  font-weight: 900;
}

:deep(.is-process) {
  color: #ffffff !important;
  font-weight: bold;
}

:deep(.el-step__line) {
  background-image: linear-gradient(to top, #0fd850 0%, #f9f047 100%);
}
</style>